<template>
  <el-dialog width="1200px" :title="$t('m.packaging.pack')" :visible="popupVisible" :before-close="close">
    <el-form align="left" ref="formInline" :model="detail" label-width="150px">
      <el-row>
        <el-col :span="22">
          <el-form-item :label="$t('m.packaging.tsareacode')">
            <el-input maxlength="20" show-word-limit disabled v-model="detail.tsareacode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.packaging.confirmtsareacode')">
            <input readonly ref="tsareacode" class="tsareacode" maxlength="20" show-word-limit v-model="formInline.tsareacode" @keydown="onKeys">
          </el-form-item>
          <el-form-item :label="$t('m.packaging.quantity')">
            <el-input ref="quantity" maxlength="3" v-input-valid show-word-limit v-model="formInline.quantity"
            :disabled="!formInline.tsareacode" @keydown.enter.native="submit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="center">
          <el-button @click="close">{{$t('m.cancel')}}</el-button>
          <el-button type="primary" @click="submit" :loading="btnLoading">{{$t('m.confirm')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name:'packaging',
  props:{
    popupVisible:{
      type:Boolean,
      default:false
    },
    tsareacode:{
      type:String,
      default:''
    },
    detail:{
      type:Object,
      default:()=>{}
    }
  },
  data(){
    let initFields = ['code','lastTime','nextTime','lastCode','nextCode']
    Object.assign(this,initFields.reduce((val,current,arr)=>Object.assign(val,{[current]:'11'}),{}))
    return {
      formInline:{
        quantity:'', // 运单数量
        tsareacode:''
      },
      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){
    // 设置默认焦点
    this.$nextTick(() => {
      this.$refs.tsareacode.focus()
    })
  },
  components:{

  },
  methods:{
    onKeys:function(e){
      this.nextCode = e.key
      this.nextTime = new Date().getTime()
      if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime <= 30){
        if(this.lastCode === 'Shift'){this.lastCode = ''}
        this.code += this.lastCode
      } else if (this.lastCode != null && this.lastTime != null && this.nextTime - this.lastTime > 100){
        this.code = ''
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
      if (e.which == 13){
        this.formInline.tsareacode = this.code
        console.log(this.formInline.tsareacode)
        if(this.formInline.tsareacode!==this.detail.tsareacode){
          this.formInline.tsareacode = ''
          this.callbackMessage(this.$t('m.packaging.confirmtips2'))
        }
        this.code = ''
        // 设置默认焦点
        this.$nextTick(() => {
          this.$refs.quantity.focus()
        })
      }
    },
    close(){
      this.$emit('close')
    },
    // 打包dialog提交
    submit(){
      if(!this.formInline.tsareacode) return this.callbackMessage(this.$t('m.packaging.confirmtips1'))
      if(this.formInline.tsareacode!==this.detail.tsareacode) return this.callbackMessage(this.$t('m.packaging.confirmtips2'))
      if(!this.formInline.quantity) return this.callbackMessage(this.$t('m.packaging.quantityValidate1'))
      let options = {
        method:'put',
        url:`/packaging/handle/${this.detail.tsareacode}`,
        data:{
          packagingid:this.detail.id,
          orderid:this.detail.orderid,
          quantity:this.formInline.quantity
        }
      }
      this.btnLoading = true
      this.$axios(options).then(({data}) => {
        this.btnLoading = false
        this.$emit('callback',data)
      }).catch(()=>{
        this.btnLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 60px;
  font-size: 24px;
}
::v-deep .el-form-item__label {
  font-size: 20px;
  line-height: 60px;
}
::v-deep .el-dialog__title {
  font-size: 24px;
}
::v-deep.tsareacode {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding-left: 15px;
  font-size: 24px;
  color: #606266;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
}
.tsareacode:focus {
  outline: 0;
  border: 1px solid #409eff;
}
</style>